<div class = "123">
<el-form    label-width="100%">
    <el-form-item label="">
    </el-form-item>
</el-form>

    <div class="consume-panel">
        <el-form :inline="true" :model="formData" ref="formData" label-width="100px" >
    <el-row>
        <el-col :span="7">
            <el-form-item label="预约单位" prop="appoUnit":rules
                    ="[ {required: true, message: '预约单位不能为空'},
                             { max:50, message: '长度不能超过50'}]"
      >
            <el-autocomplete
                    class="inline-input"
                    v-model="formData.appoUnit"
                    :fetch-suggestions="querySearchUnit"
                    :disabled="parentData&&parentData.showOrEdit=='show'"
                    placeholder="请输入内容"
                    @select="handleSelect"
                >
            </el-autocomplete>
            </el-form-item>
        </el-col>
        <el-col :span="7">
            <el-form-item label="联络人"    prop="appoName":rules
                                 ="[ {required: true, message: '联络人不能为空'},
                                  { max:20, message: '长度不能超过20字符'}]"
            >
                <el-input v-model="formData.appoName" :disabled="parentData&&parentData.showOrEdit=='show'"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="7">
            <el-form-item label="联络人电话"  prop="appoPhoneNum":rules
                    ="[ {required: true, message: '联络人电话不能为空'},
                     {max:11,message: '电话必须为小于11位的数值'}]">
                <el-input v-model="formData.appoPhoneNum" :disabled="parentData&&parentData.showOrEdit=='show'"></el-input>
            </el-form-item>
        </el-col>

        <el-col :span="3" v-if="parentData">
            <el-form-item >
                <el-button  type="primary" size="small" @click="returnParent" >返回</el-button>
            </el-form-item>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="7">
            <el-form-item label="联络邮箱" prop="appoEmil">
                <el-input v-model="formData.appoEmil" :disabled="parentData&&parentData.showOrEdit=='show'"></el-input>
            </el-form-item>
        </el-col>
    </el-row>


   <div style=""></div>
    <el-row>
        <el-col :span="7">
            <el-form-item label="航班性质"  prop="flightProperty":rules
                    ="[ {required: true, message: '航班性质不能为空', trigger:'blur'}
                                    ]">
                <el-select v-model="formData.flightProperty" placeholder="航班性质" :disabled="parentData&&parentData.showOrEdit=='show'">
                    <el-option label="包机"  value="包机"></el-option>
                    <el-option label="托管" value="托管"></el-option>
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="7">
            <el-form-item label="航班号"  prop="flightInfo.flightInfoId":rules
                    ="[ {required: true, message: '航班号不能为空',trigger:'blur'}]">
                <el-select v-model="formData.flightInfo.flightInfoId" filterable placeholder="请选择" @change="handleSelect" :disabled="parentData&&parentData.showOrEdit=='show'">
                    <el-option
                            v-for="plane in flights"
                            :key="plane.flightInfoId"
                            :label="plane.flightNum"
                            :value="plane.flightInfoId"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-col>
            <el-form-item label="预约日期"  prop="appoDate":rules
                    ="[ {required: true, message: '预约时间不能为空'}]">
                <el-date-picker
                        v-model="formData.appoDate"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH"
                        value-format="yyyy-MM-dd HH"

                        :disabled="parentData&&parentData.showOrEdit=='show'"

                >
                </el-date-picker>
            </el-form-item>
        </el-col>

    </el-row>
    <el-row>
        <el-col :span="7">
            <el-form-item label="     "  prop="appProperty":rules
                    ="[ {required: true, message: '进出港不能为空'}]">
                <el-radio-group v-model="formData.appProperty" :disabled="parentData&&parentData.showOrEdit=='show'">
                    <el-radio label="进港">进港</el-radio>
                    <el-radio label="出港">出港</el-radio>
                    <el-radio label="中转联程">中转联程</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-col>
        <el-col :span="7">
                <el-form-item label="预约航线: 从" prop="originating":rules
                        ="[ {required: true, message: '出发地不能为空'},{max:30,message:'长度不能超过30位'}]">
                    <el-autocomplete
                            class="inline-input"
                            v-model="formData.originating"
                            :disabled="parentData&&parentData.showOrEdit=='show'"
                            :fetch-suggestions="querySearchPlace"
                            placeholder="请输入内容"
                            @select="handleSelect"
                    >
                    </el-autocomplete>
                </el-form-item>
        </el-col>
        <el-col :span="7">
            <el-form-item label="到" prop="destination":rules
                    ="[ {required: true, message: '目的地地不能为空'},{max:30,message:'长度不能超过30位'}]">
                <el-autocomplete
                        class="inline-input"
                        v-model="formData.destination"
                        :fetch-suggestions="querySearchPlace"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        placeholder="请输入内容"
                        @select="handleSelect"
                >
                </el-autocomplete>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="10">
            <el-form-item label="合同协议"  prop="agreement":rules
                    ="[ {required: true, message: '航线性质'}
                                    ]" >
                <el-select  clearable @change="contractChange" v-model="formData.agreement.contractManageId" placeholder="合同协议" :disabled="parentData&&parentData.showOrEdit=='show'" >
                    <el-option  v-for="contract in  contracts" :label="contract.contractAgreemen" :value="contract.contractManageId" :key="contract.contractManageId">

                    </el-option>
                </el-select>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="8">
            <el-form-item label="协议单位"  prop="region">
                <el-input
                        placeholder="请输入内容"
                        v-model="contract.agreementUnit"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        :disabled="true">
                </el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="合同编号">
                <el-input
                        placeholder="请输入内容"
                        v-model="contract.agreementNumber"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        :disabled="true">
                </el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="8">
            <el-form-item label="起始日期">
                <el-input
                        placeholder="请输入内容"
                        v-model="contract.startDate"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        :disabled="true">
                </el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="终止日期">
                <el-input
                        placeholder="请输入内容"
                        v-model="contract.endDate"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        :disabled="true">
                </el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="8">
            <el-form-item label="协议次数">
                <el-input
                        placeholder="请输入内容"
                        v-model="contract.agreementNumber"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        :disabled="true">
                </el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="剩余次数">
                <el-input
                        placeholder="请输入内容"
                        v-model="contract.residueDegree"
                        :disabled="parentData&&parentData.showOrEdit=='show'"
                        :disabled="true">
                </el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <!--<h3>预约内容</h3>-->
    <el-collapse v-model="activeNames" class="gray-panel" v-if="!formData.agreement.contractManageId">
        <el-collapse-item title="预约内容" name="1">
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item class="el-form-item-thin"  prop="hasPersonNum">
                        <el-checkbox label="1 乘机人数量" name="type" v-model="formData.hasPersonNum" :disabled="parentData&&parentData.showOrEdit=='show'" ></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="人数" class="el-form-item-thin"  prop="personNum">
                        <el-input
                                placeholder="请输入内容"
                                v-model="formData.personNum" :disabled="parentData&&parentData.showOrEdit=='show'" :disabled="parentData&&parentData.showOrEdit=='show'">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin"  prop="needCar">
                        <el-checkbox label="2 是否安排车辆接送" name="type" v-model="formData.needCar" :disabled="parentData&&parentData.showOrEdit=='show'"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="接送地址" prop="address">
                        <el-input
                                placeholder="请输入内容"
                                v-model="formData.address" :disabled="parentData&&parentData.showOrEdit=='show'">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="hasContactInfo">
                        <el-checkbox label="3 乘机人姓名及联系方式" name="type" v-model="formData.hasContactInfo"  ></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item  class="el-form-item-thin" label="姓名"  prop="contactName">
                        <el-input :disabled="parentData&&parentData.showOrEdit=='show'"
                                  placeholder="请输入内容"
                                  v-model="formData.contactName">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item   class="el-form-item-thin" label="联系方式" prop="contactPhoneNum">
                        <el-input
                                placeholder="请输入内容"
                                v-model="formData.contactPhoneNum" :disabled="parentData&&parentData.showOrEdit=='show'">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin"  prop="needFerryPush">
                        <el-checkbox label="4 请协助安排VIP摆渡车摆渡客人出机场至客人接待车辆停车位" v-model="formData.needFerryPush" :disabled="parentData&&parentData.showOrEdit=='show'"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注"  prop="ferryPushreMarks">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="form.ferryPushreMarks">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needExitPassageway">
                        <el-checkbox label="5 是否走安检通道" name="type" v-model="formData.needExitPassageway" :disabled="parentData&&parentData.showOrEdit=='show'"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="exitPassagewayMarks">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.exitPassagewayMarks">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin"  prop="needBaggageHandling">
                        <el-checkbox label="6 请协助安排行李员提供行李搬运服务" name="type" :disabled="parentData&&parentData.showOrEdit=='show'" v-model="formData.needBaggageHandling"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="baggageHandlingMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.baggageHandlingMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needGuide">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="7 请协助安排专人迎接并全程引导客人出机场，帮助乘客办理手续" name="type" v-model="formData.needGuide"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注"  prop="guideMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.guideMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needCorporateAircraftSpecialWay">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="8 请协助安排乘客使用专用公务机通道出场 " name="type" v-model="formData.needCorporateAircraftSpecialWay"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="corporateAircraftSpecialWayMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.corporateAircraftSpecialWayMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needCarToApron">
                        <el-checkbox label="9 请协助安排乘客车辆直接进机坪接乘客" :disabled="parentData&&parentData.showOrEdit=='show'" name="type" v-model="formData.needCarToApron"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="carToApronMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.carToApronMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needCustomsBorderControl">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="10 请协调海关、边防、检疫、VIP安检通道为我机组和客人办理入关联检手" name="type" v-model="formData.needCustomsBorderControl"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="customsBorderControlMark">
                        <el-input
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                placeholder="请输入内容"
                                v-model="formData.customsBorderControlMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needAircraftSpecialService">
                        <el-checkbox  :disabled="parentData&&parentData.showOrEdit=='show'" label="11 是否需要航空器特种保障服务" name="type" v-model="formData.needAircraftSpecialService"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="aircraftSpecialServiceMark">
                        <el-input
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                placeholder="请输入内容"
                                v-model="formData.aircraftSpecialServiceMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needAircraftGuide">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="12 否使用地面人员负责引导指挥飞机" name="type" v-model="formData.needAircraftGuide"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注"  prop="aircraftGuide">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.aircraftGuide">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needBusinessAircraftRoom">
                        <el-checkbox label="13 是否使用公务机室" :disabled="parentData&&parentData.showOrEdit=='show'" name="type" v-model="formData.needBusinessAircraftRoom"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="businessAircraftRoomMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="form.businessAircraftRoomMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin"  prop="needCivilAviationControlCommand">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="14 是否需要民航实施管制指挥" name="type" v-model="formData.needCivilAviationControlCommand"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="civilAviationControlCommandMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.civilAviationControlCommandMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin" prop="needGasoline">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="15 是否需要加油" name="type" v-model="formData.needGasoline"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="gasolineMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.gasolineMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex"  justify="">
                <el-col :span="10">
                    <el-form-item  class="el-form-item-thin"  prop="needOther">
                        <el-checkbox :disabled="parentData&&parentData.showOrEdit=='show'" label="16 其他" name="type" v-model="formData.needOther"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  class="el-form-item-thin" label="备注" prop="otherMark">
                        <el-input
                                placeholder="请输入内容"
                                :disabled="parentData&&parentData.showOrEdit=='show'"
                                v-model="formData.otherMark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-collapse-item>
    </el-collapse>
    <el-row type="flex"   justify="center"  v-if="!parentData">
        <el-col :span="6">
            <el-form-item >
                <el-button  type="primary" size="large" @click="saveAppointment" style="margin-top: 40px; margin-left: 30px;">确定保存</el-button>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row   type="flex"  justify="end"  v-if="parentData">
        <el-col :span="6" v-if="parentData.showOrEdit=='show'">
            <el-form-item  >
                <el-button  type="primary" size="large" @click="passAppointment('审核通过')" style="margin-top: 40px; margin-left: 30px;">通过审核</el-button>
            </el-form-item>
            <el-form-item  >
                <el-button  type="primary" size="large" @click="returnParent" style="margin-top: 40px; margin-left: 30px;">返回</el-button>
            </el-form-item>
        </el-col>
        <el-col :span="6" v-if="parentData.showOrEdit=='edit'">
            <el-form-item  >
                <el-button  type="primary" size="large" @click="editAppointment" style="margin-top: 40px; margin-left: 30px;">确定修改</el-button>
            </el-form-item>
        </el-col>
        <el-col :span="6" v-if="parentData.showOrEdit=='edit'">
            <el-form-item  >
                <el-button  type="primary" size="large" @click="returnParent" style="margin-top: 40px; margin-left: 30px;">返回</el-button>
            </el-form-item>
        </el-col>
    </el-row>
</el-form>
    </div>
</div>